<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add :addComment="addComment"/>
      <List :comments="comments" :deleteComment="deleteComment"/>
    </div>
  </div>
</template>

<script>
    import  Add from './components/Add.vue'
    import  List from './components/List.vue'
    export default {
        name: "App",
        data(){
          return {
            comments:[
              {
                name:'逍遥',
                content:'你好啊'
              },
              {
                name:'小龙女',
                content:'你好'
              },
              {
                name:'紫月',
                content:'我不好'
              }
            ]
          }
        },
        methods:{
          addComment(comment){
          this.comments.unshift(comment);
          },
          deleteComment(index){
            this.comments.splice(index,1);
          }
        },
        components: {
          Add,
          List
        },
        mounted(){
          console.log(this)
        }
    }
</script>

<style scoped>

</style>
